<template>
  <div class="project-statistics-card">
    <div class="header">
      <span>少年俱乐部项目数据</span>
    </div>
    <div class="content">
      <div class="info">
        <span class="unit-line"></span>
        <div class="text">
          <span class="unit">累计项目种类</span>
          <span class="number">{{ number }}</span>
        </div>
      </div>
    </div>
    <div ref="barChart" class="chart" id="Chart4"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import { getProjectData } from '@/api/statistics'

  export default {
    data() {
      return {
        number: 0,
        chart: null,
        chartData: []
      }
    },
    created() {
      this.initChart()
    },
    methods: {
      async initChart() {
        const res = await getProjectData({ year: new Date().getFullYear() })
        if (res && res.data && res.data.list) {
          this.number = res.data.number || 0
          this.chartData = res.data.list
        } 
        this.chart = echarts.init(document.getElementById("Chart4"))
        const option = {
          grid: {
            top: 40,
            bottom: 40,
            left: 40,
            right: 20
          },
          xAxis: {
            type: 'category',
            data: this.chartData.map(item => item.category),
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { lineStyle: { type: 'dashed' } }
          },
          yAxis: {
            type: 'value',
            axisLine: { show: false },
            axisTick: { show: false }
          },
          series: [{
            data: this.chartData.map(item => item.value),
            type: 'bar',
            itemStyle: {
              color: '#67C23A',
              barBorderRadius: [5, 5, 0, 0]
            },
            barWidth: '50%',
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          }]
        }
        this.chart.setOption(option)
        // 监听父元素大小变化
        const ro = new ResizeObserver(entries => {
          for (let entry of entries) {
            const cr = entry.contentRect;
            if (this.chart) {
              this.chart.resize();
            }
          }
        });
        ro.observe(Chart);
      }
    },
    beforeDestroy() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
    }
  }
</script>

<style scoped>
  .project-statistics-card {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
  }

  .header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
  }

  .content {
    margin-bottom: 20px;
  }

  .info {
    display: flex;
    align-items: center;
    background-color: #f0f2f5;
    padding: 10px;
    border-radius: 4px;
  }

  .unit-line {
    display: inline-block;
    width: 4px;
    height: 40px;
    background-color: #67C23A;
    margin-right: 8px;
  }

  .text {
    display: flex;
    flex-direction: column;
  }

  .unit {
    font-size: 14px;
    color: #999;
  }

  .number {
    font-size: 28px;
    font-weight: bold;
    color: #333;
  }

  .chart {
    width: 100%;
    height: 250px;
  }
</style>
